<template>
    <div class="nav-bar">
        <div class="left">
            <img class="logo" height="58" src="../assets/img/common/logo.png" alt="logo" />
            <el-icon :size="20">
                <Fold />
            </el-icon>
        </div>
        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
            :ellipsis="false">
            <el-menu-item index="1">站点设置</el-menu-item>
            <el-menu-item index="2">预览网站</el-menu-item>
            <el-sub-menu index="3">
                <template #title>黄小米</template>
                <el-menu-item index="3-1">消息通知</el-menu-item>
                <el-menu-item index="3-2">账户设置</el-menu-item>
                <el-menu-item index="3-3">退出登录</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<style lang="less" scoped>
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #545c64;
    color: white;

    .left {
        display: flex;
        align-items: center;
    }

    .el-menu {
        border-bottom: 0;
    }
}
</style>